<template>
  <aside class="msn-sidebar">
    <!-- 侧边栏头部 -->
    <div class="sidebar-header">
      <h3 class="sidebar-title">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21M3 12C3 7.03 7.03 3 12 3C16.97 3 21 7.03 21 12C21 16.97 16.97 21 12 21C7.03 21 3 16.97 3 12ZM12 8V12L16 16" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        商品分类
      </h3>
    </div>
    
    <!-- 主要分类 -->
    <div class="category-section">
      <div class="category-item" v-for="category in mainCategories" :key="category.id">
        <a :href="`/categories/${category.id}`" class="category-main">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 6V12L16 16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span class="category-name">{{ category.name }}</span>
          <svg class="category-icon" :class="{ 'rotate': openCategory === category.id }" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
        <div class="subcategories" v-if="openCategory === category.id">
          <a :href="`/categories/${sub.id}`" class="subcategory-item" v-for="sub in category.subcategories" :key="sub.id">
            {{ sub.name }}
          </a>
        </div>
      </div>
    </div>
    
    <!-- 服务中心 -->
    <div class="sidebar-section">
      <div class="category-title">服务中心</div>
      <div class="service-item" v-for="service in services" :key="service.id">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 16V12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 8H12.01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>{{ service.name }}</span>
      </div>
    </div>
    
    <!-- 会员服务 -->
    <div class="sidebar-section">
      <div class="category-title">会员服务</div>
      <div class="vip-card">
        <div class="vip-header">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M8 14L11 17L16 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span class="vip-title">会员中心</span>
        </div>
        <div class="vip-status">
          <span class="status-text">普通会员</span>
          <span class="vip-benefits">享会员价</span>
        </div>
        <button class="vip-upgrade">升级会员</button>
      </div>
    </div>
  </aside>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 当前打开的分类
const openCategory = ref(null)

// 主要商品分类
const mainCategories = ref([
  {
    id: 1,
    name: '数码家电',
    subcategories: [
      { id: 101, name: '手机通讯' },
      { id: 102, name: '电脑办公' },
      { id: 103, name: '数码配件' },
      { id: 104, name: '家用电器' },
      { id: 105, name: '厨房电器' }
    ]
  },
  {
    id: 2,
    name: '服饰鞋包',
    subcategories: [
      { id: 201, name: '男装' },
      { id: 202, name: '女装' },
      { id: 203, name: '童装' },
      { id: 204, name: '鞋靴' },
      { id: 205, name: '箱包' },
      { id: 206, name: '配饰' }
    ]
  },
  {
    id: 3,
    name: '家居家装',
    subcategories: [
      { id: 301, name: '家具' },
      { id: 302, name: '家纺' },
      { id: 303, name: '家居日用' },
      { id: 304, name: '厨具' },
      { id: 305, name: '家装建材' }
    ]
  },
  {
    id: 4,
    name: '美妆个护',
    subcategories: [
      { id: 401, name: '面部护理' },
      { id: 402, name: '彩妆' },
      { id: 403, name: '身体护理' },
      { id: 404, name: '香水香氛' },
      { id: 405, name: '口腔护理' }
    ]
  },
  {
    id: 5,
    name: '母婴玩具',
    subcategories: [
      { id: 501, name: '奶粉辅食' },
      { id: 502, name: '尿裤湿巾' },
      { id: 503, name: '喂养用品' },
      { id: 504, name: '婴儿洗护' },
      { id: 505, name: '玩具乐器' }
    ]
  },
  {
    id: 6,
    name: '食品生鲜',
    subcategories: [
      { id: 601, name: '休闲零食' },
      { id: 602, name: '酒水饮料' },
      { id: 603, name: '粮油调味' },
      { id: 604, name: '生鲜果蔬' },
      { id: 605, name: '乳制品' }
    ]
  },
  {
    id: 7,
    name: '运动户外',
    subcategories: [
      { id: 701, name: '运动服饰' },
      { id: 702, name: '运动鞋' },
      { id: 703, name: '户外装备' },
      { id: 704, name: '健身器材' },
      { id: 705, name: '体育用品' }
    ]
  },
  {
    id: 8,
    name: '汽车用品',
    subcategories: [
      { id: 801, name: '汽车装饰' },
      { id: 802, name: '美容养护' },
      { id: 803, name: '汽车电子' },
      { id: 804, name: '安全应急' },
      { id: 805, name: '轮胎轮毂' }
    ]
  }
])

// 服务中心
const services = ref([
  { id: 1, name: '我的订单' },
  { id: 2, name: '优惠券' },
  { id: 3, name: '客户服务' },
  { id: 4, name: '物流查询' },
  { id: 5, name: '退换货' },
  { id: 6, name: '购物车' }
])

// 切换子分类显示
const toggleSubcategories = (categoryId) => {
  if (openCategory.value === categoryId) {
    openCategory.value = null
  } else {
    openCategory.value = categoryId
  }
}

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.msn-sidebar {
  width: 280px;
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  height: fit-content;
  transition: all var(--transition-normal);
  border: 1px solid var(--border-color);
}

/* 侧边栏头部 */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* 商品分类 */
.category-section {
  margin-bottom: 24px;
}

.category-item {
  margin-bottom: 8px;
}

.category-main {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  background-color: white;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.category-main:hover {
  background-color: #f8f8f8;
  border-color: #e1251b;
}

.category-main svg:first-child {
  margin-right: 12px;
  color: #e1251b;
}

.category-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.category-icon {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.category-icon.rotate {
  transform: rotate(180deg);
}

/* 子分类 */
.subcategories {
  margin-top: 4px;
  padding-left: 16px;
}

.subcategory-item {
  padding: 8px 12px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
}

.subcategory-item:hover {
  background-color: #f0f0f0;
  color: #e1251b;
}

/* 侧边栏区域 */
.sidebar-section {
  margin-bottom: 24px;
}

.category-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 服务中心 */
.service-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  background-color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.service-item:hover {
  background-color: #f8f8f8;
  border-color: var(--primary-color);
}

.service-item svg {
  margin-right: 12px;
  color: var(--primary-color);
}

.service-item span {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 会员服务 */
.vip-card {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  border-radius: var(--radius-lg);
  padding: 16px;
  color: white;
  text-align: center;
}

.vip-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.vip-header svg {
  margin-right: 8px;
}

.vip-title {
  font-size: 16px;
  font-weight: 600;
}

.vip-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.vip-benefits {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.vip-upgrade {
  background-color: white;
  color: #e1251b;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
}

.vip-upgrade:hover {
  background-color: #f0f0f0;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .msn-sidebar {
    width: 260px;
  }
}

@media (max-width: 1024px) {
  .msn-sidebar {
    display: none;
  }
}
</style>